<template>
  <div>

    <div>
      <el-form ref="form" :model="formData" label-width="130px" :inline="true" size="mini">
        <el-form-item :label="isShowLabel ? '':'商品名称'">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item :label="isShowLabel ? '':'商品货号'">
          <el-input v-model="formData.productSn" />
        </el-form-item>
        <el-form-item :label="isShowLabel ? '':'品牌'">
          <!-- <el-input v-model="formData.brandId" /> -->
          <el-select v-model="formData.brandId" placeholder="请选择">
            <el-option
              v-for="item in brandList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="isShowLabel ? '':'上架状态'">
          <!-- <el-input v-model="formData.publishStatus" /> -->
          <el-select v-model="formData.publishStatus">
            <el-option

              label="下架"
              value="0"
            />
            <el-option

              label="上架"
              value="1"
            />
          </el-select>

        </el-form-item>
        <el-form-item :label="isShowLabel ? '':'审核状态'">
          <!-- <el-input v-model="formData.verifyStatus" /> -->
          <el-select v-model="formData.verifyStatus">
            <el-option

              label="未审核"
              value="0"
            />
            <el-option

              label="审核通过"
              value="1"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </div>
    <el-card class="margin_30" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <div v-if="!isShowLabel">
          <el-button type="primary" size="default" @click="addGoods">新增</el-button>
          <el-button type="primary" size="default" @click="exportToExcel">导出excel</el-button>
        </div>
        <p v-else>
          商品列表
        </p>

      </div>
      <el-table :data="list" border stripe>
        <el-table-column
          prop="id"
          label="商品图片"
        >
          <template v-slot="scope">
            <img style="width:100px;height:100px" :src="scope.row.pic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          v-if="isShowLabel"
          prop="id"
          label="选择"
        >
          <template v-slot="scope">
            <el-radio v-model="radio" :label="scope.row.id" @change="toggleDialog(scope.row)">  <span /></el-radio>

          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="商品"
        >
          <template v-slot="scope">
            <div>
              <p>{{ scope.row.name }}</p>
              <p>品牌{{ scope.row.brandName }}</p>
              <p>{{ scope.row.description }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="商品价格"
        >
          <template v-slot="scope">
            <div>
              <p>原价:{{ scope.row.originalPrice }}</p>
              <p>现价：{{ scope.row.price }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="操作"
        >
          <template v-slot="scope">
            <router-link :to="{name:'goodsManageEditGoods',query:{id:scope.row.id}}">编辑</router-link>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="start"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      title="编辑限时活动"
      :visible.sync="isDialogShow"
      width="60%"
      append-to-body
      @close=""
    >
      <el-form ref="form" :model="form" label-width="120px" :inline="false" size="mini">
        <el-form-item label="商品原价">
          {{ form.price }}
        </el-form-item>
        <el-form-item label="商品名称">
          {{ form.name }}
        </el-form-item>
        <el-form-item label="促销价格">
          <el-input v-model="form.promotionPrice" />

        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort" />

        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="form.promotionStartTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          />

        </el-form-item>
        <el-form-item label="结束时间">

          <el-date-picker
            v-model="form.promotionEndTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="活动限购数量">
          <el-input v-model="form.promotionPerLimit" />

        </el-form-item>
        <el-form-item label="商品图片">
          <img style="width:100px;height:100px" :src="form.pic" alt="">

        </el-form-item>

      </el-form>

      <span slot="footer">
        <el-button @click="">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  productsByPage,
  findAllBrand
} from '@/api/goodsManage/goodsList/index.js'
import {
  addRecommend
} from '@/api/market/activity/index.js'
// import mix from '@/mixins/index.js'
export default {
  // is-show-label 控制表单文字的是否显示  传递true 不显示文字 不传或者传false 显示文字
  props: ['list', 'brandList', 'total', 'start', 'limit', 'isShowLabel'],
  data() {
    return {
      // list: [],
      // brandList: [],
      radio: '',
      isDialogShow: false,
      form: {
        'brandName': '',
        'createTime': '',
        'modifyTime': '',
        'name': '',
        'pic': '',
        'price': '',
        'productCategoryName': '',
        'productId': '',
        'productSn': '',
        'promotionEndTime': '',
        'promotionPerLimit': '',
        'promotionPrice': '',
        'promotionStartTime': '',
        'publishStatus': '',
        'recommendId': '',
        'sort': '',
        'type': ''
      },
      formData: {
        'brandId': '',
        'id': '',
        'name': '',
        'productCategoryId': '',
        'productSn': '',
        'publishStatus': '',
        'verifyStatus': ''
      }
    }
  },
  computed: {

  },
  created() {
    // this.init()
    // findAllBrand()
    //   .then(res => {
    //     this.brandList = res.data.items
    //   })

  },
  mounted() {

  },
  methods: {
    exportToExcel() {
      import('@/vendor/Export2Excel').then(excel => {
        console.log('懒加载成功')
        const tHeader = ['商品名称', '价格', '商品id']
        const filterVal = ['name', 'price', 'id']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        console.log(data)
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    save() {
      addRecommend(this.form)
        .then(res => {
          console.log(res)
          this.isDialogShow = !this.isDialogShow
          this.$emit('close')
        })
    },
    toggleDialog(val) {
      var params = JSON.parse(JSON.stringify(val))
      params.promotionPrice = ''
      params.sort = ''
      params.promotionStartTime = ''
      params.promotionEndTime = ''
      params.promotionPerLimit = ''
      params.productId = params.id
      this.form = params
      this.isDialogShow = !this.isDialogShow
    },
    handleSizeChange(val) {
      console.log('子组件事件')
      this.$emit('handle-size-change', val)
    },
    handleCurrentChange(val) {
      this.$emit('handle-current-change', val)
    },
    addGoods() {
      this.$router.push({ name: 'goodsManageAddGoods' })
    },
    onSubmit() {
      // this.init()
      this.$emit('search', this.formData)
    },
    init() {
      productsByPage(this.start, this.limit, this.formData)
        .then(res => {
          console.log(res)
          this.list = res.data.rows
          this.total = res.data.total
        })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
